<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 注意：挂载阶段的钩子函数除render以外在整个生命周期过程中只会执行一次
    class App extends React.Component{
        constructor() {
            super();
            this.h3Ref = React.createRef();
            this.state = {
                a:1
            }
            // 定义状态，定义实例属性
            console.log("1-constructor")
        }
        UNSAFE_componentWillMount(){
            // 组件即将挂载
            // console.log(this.state.a);// 1
            this.state.a = 100;
            console.log("2-componentWillMount",this.h3Ref)
        }
        render(){
            // 提供渲染的React元素
            console.log("3-render")
            return (
                <div>
                    <h3 ref={this.h3Ref}>App:{this.state.a}</h3>
                </div>
            )
        }
        componentDidMount(){
            // 当组件挂载完毕之后执行。
            console.log("4-componentDidMount",this.h3Ref)
        }
    }


    const root = ReactDOM.createRoot(document.querySelector("#root"));
    root.render((
        <App></App>
    ))
</script>
</html>